<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.4.1.js"></script>
<script>


	$(document).ready(function() {

		// 初始化处理
		$.get("initajax.action", null, function(data) {

			data.forEach((item, i) => {
				let str = `<option  value="${item}">${item}</option>`;
				$("#job").append(str)
			})
		}, "json")


		// 检索按钮点击
		$(".primary").on("click", function() {
			// 初始化处理
			$.post("searchajax.action", $("#form0").serialize(), function(data) {
				$(".table tr:gt(1)").empty()
				data.forEach((item, i) => {
					let str = `	<tr>
						<td>${i + 1}</td>
						<td>${item.empno }</td>
						<td>${item.ename }</td>
						<td>${item.job }</td>
					</tr>`
					$(".table").append(str)
				})
			}, "json")
		})
		
		$(".primary1").on("click", function() {
			// 初始化处理
			$.ajax({
				url: "searchajax1.action",
				method: "post",
			    contentType:'application/json;charset=utf-8',
				data: JSON.stringify({ename: $("#ename").val(), job: $("#job").val()}),
				dataType: "json",
				success:function(data) {
					$(".table tr:gt(1)").empty()
					data.forEach((item, i) => {
						let str = `	<tr>
							<td>${i + 1}</td>
							<td>${item.empno }</td>
							<td>${item.ename }</td>
							<td>${item.job }</td>
						</tr>`
						$(".table").append(str)
					})
				}
				
			})
		})
	})
</script>
</head>
<body>
<!-- 第2种: ajax -->

<form id="form0" action="search.action" method="get" onsubmit="return false">
	员工名:<input name="ename" id="ename"  />

	<select name="job" id="job">
		<option value="-1">----选择工作---</option>
		
	</select>
	<button class="primary">检索</button>
	<button class="primary1">检索</button>
</form>
<hr />
明细：
<table class="table">
	<tr>
		<th>No</th>
		<th>empno</th>
		<th>ename</th>
		<th>job</th>
	</tr>

</table>

</body>
</html>